<template>
  <div>
    <pdf
      ref="pdf"
      :src="fullFileUrl"
      :page="pageNum"
      :rotate="pageRotate"
      @password="password"
      @page-loaded="pageLoaded($event)"
      @error="pdfError($event)"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum = $event"
      @link-clicked="page = $event"
    ></pdf>
    <div class="pdf-footer">
      <div class="info">{{ pageNum }}/{{ pageTotalNum }}</div>
      <a-button-group class="operate">
        <!-- <a-button type="primary" @click="clock">顺时针</a-button>
        <a-button type="primary" @click="counterClock">逆时针</a-button> -->
        <a-button type="primary" @click="prePage">上一页</a-button>
        <a-button type="primary" @click="nextPage">下一页</a-button>
        <!-- <a-button type="primary" @click="scaleD">放大</a-button>
        <a-button type="primary" @click="scaleX">缩小</a-button>
        <a-button type="primary" @click="fileDownload(fileUrl, 'pdf文件')">下载</a-button> -->
      </a-button-group>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'WqPdf',
  components: {
    pdf
  },
  props: {
    fileUrl: {
      type: String,
      required: true
    }
    // 测试url:   http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf
  },
  computed: {
    fullFileUrl() {
      return this.fileUrl
    }
  },
  data() {
    return {
      pageTotalNum: 1,
      pageNum: 1,
      loadedRatio: 0, // 加载进度
      curPageNum: 0, // 页面加载完成
      scale: 100, // 放大系数，默认100%
      pageRotate: 0 // 旋转角度， 90的倍数才有效
    }
  },
  mounted() {
    // this.getPageNum();
  },
  methods: {
    getPageNum() {
      let loadingTask = pdf.createLoadingTask(this.file)
      loadingTask.promise
        .then(pdf => {
          this.pageNum = pdf.numPages
        })
        .catch(err => {
          console.error('pdf加载失败', err)
        })
    },
    // 下载pdf
    fileDownload(data, fileName) {
      let blob = new Blob([data], {
        // type类型根据实际进行修改
        type: 'application/pdf;charset-UTF-8'
      })
      let filename = fileName || 'pdf.pdf'
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        let blobURL = window.URL.createObjectURL(blob)
        // 创建隐藏a标签下载
        let tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', filename)
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('atrget', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    },
    // pdf密码   有则需要输入
    password(updatePassword, reason) {
      updatePassword(prompt('password is "test"'))
    },
    // 放大
    scaleD() {
      this.scale += 5
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
    },
    // 缩小
    scaleX() {
      // 最小缩放为100%
      if (this.scale == 100) return

      this.scale += -5
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
    },
    // 切换上一页
    prePage() {
      let p = this.pageNum
      p = p > 1 ? p - 1 : this.pageTotalNum
      this.pageNum = p
    },
    // 切换下一页
    nextPage() {
      let p = this.pageNum
      p = p < this.pageTotalNum ? p + 1 : 1
      this.pageNum = p
    },
    // 顺时针旋转角度
    clock() {
      this.pageRotate += 90
    },
    // 逆时针旋转
    counterClock() {
      this.pageRotate -= 90
    },
    // 页面加载成功 当前页
    pageLoaded(e) {
      this.$emit('current', e)
      this.curPageNum = e
    },
    // 异常监听
    pdfError(error) {
      console.log(error)
    }
  },
  beforeDestroy() {
    this.pageNum = 1
  }
}
</script>

<style lang="less" scoped>
.pdf-footer {
  width: 100%;

  .info {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .operate {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>
